<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <title>Audio Network - data transmission over sound waves</title>

    <meta name="description" content="">

    <link rel="stylesheet" type="text/css" href="../../asset/css/simple-bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../../asset/css/example.css">
    <link rel="stylesheet" type="text/css" href="square-wave-phase.css">
    <script src="../../asset/js/site.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body onLoad="init()">

    <div id="fb-root"></div>
    <script>
        if (isProduction()) { // TODO refactor this
            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.7&appId=726972757440597";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
        }
    </script>

    <div class="wrapper">

        <div class="container">
            <h1>Audio Network - send data over sound in JavaScript</h1>
            <div class="row margin-bottom">
                <div class="col col-xs-12">
                    <div class="fb-like-cont">
                        <a href="https://www.facebook.com/Data-transmission-over-sound-500422050157351/" target="_blank" class="a-icon a-icon-fb">
                            <img src="/asset/image/fb.png" alt="Audio Network at Facebook">
                        </a>
                        <div class="fb-like" data-href="https://www.facebook.com/Data-transmission-over-sound-500422050157351/" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
                    </div>
                    <p class="text-right">
                        Return to <a href="https://audio-network.rypula.pl">main page</a>
                    </p>
                    <p class="larger text-center">
                        THIS PROJECT IS STILL UNDER DEVELOPMENT<br/>
                        Source code available at <a href="https://github.com/robertrypula/AudioNetwork" target="_blank">GitHub</a>
                    </p>
                </div>
            </div>

            <!-- ---------------- -->

            <div class="row margin-bottom">
                <div class="col col-xs-12" id="test">

                    <div class="row margin-bottom">
                        <div class="col col-xs-12">
                            <p>
                                This example shows how to change global phase offset of square
                                wave shape. In this example custom made square wave was used
                                (5 harmonics) because in Web Audio API it's not possible
                                to change phase of build in wave shapes.
                            </p>
                            <p>
                                To play some sound click on some Volume button. Start from 'Volumne 1%'
                                because it could be really loud!
                            </p>
                        </div>
                    </div>

                    <div class="margin-bottom-double">
                        <button
                            onClick="updateFrequency(20)"
                            class="btn btn-default">
                            20 Hz
                        </button>
                        <button
                            onClick="updateFrequency(200)"
                            class="btn btn-default">
                            200 Hz
                        </button>
                        <button
                            onClick="updateFrequency(500)"
                            class="btn btn-default">
                            500 Hz
                        </button>
                        <button
                            onClick="updateFrequency(1000)"
                            class="btn btn-default">
                            1000 Hz
                        </button>
                        <button
                            onClick="updateFrequency(2000)"
                            class="btn btn-default">
                            2000 Hz
                        </button>
                        <button
                            onClick="updateFrequency(5000)"
                            class="btn btn-default">
                            5000 Hz
                        </button>
                    </div>

                    <div class="margin-bottom-double">
                        <button
                            onClick="updatePhase(0)"
                            class="btn btn-default">
                            0 degrees
                        </button>
                        <button
                            onClick="updatePhase(45)"
                            class="btn btn-default">
                            45 degrees
                        </button>
                        <button
                            onClick="updatePhase(90)"
                            class="btn btn-default">
                            90 degrees
                        </button>
                        <button
                            onClick="updatePhase(135)"
                            class="btn btn-default">
                            135 degrees
                        </button>
                        <button
                            onClick="updatePhase(180)"
                            class="btn btn-default">
                            180 degrees
                        </button>
                        <button
                            onClick="updatePhase(225)"
                            class="btn btn-default">
                            225 degrees
                        </button>
                        <button
                            onClick="updatePhase(270)"
                            class="btn btn-default">
                            270 degrees
                        </button>
                        <button
                            onClick="updatePhase(315)"
                            class="btn btn-default">
                            315 degrees
                        </button>
                    </div>

                    <div class="margin-bottom-double">
                        <button
                            onClick="updateVolume(0)"
                            class="btn btn-default">
                            Mute
                        </button>
                        <button
                            onClick="updateVolume(0.01)"
                            class="btn btn-default">
                            Volume 1%
                        </button>
                        <button
                            onClick="updateVolume(0.1)"
                            class="btn btn-default">
                            Volume 10%
                        </button>
                        <button
                            onClick="updateVolume(0.5)"
                            class="btn btn-default">
                            Volume 50%
                        </button>
                        <button
                            onClick="updateVolume(1.0)"
                            class="btn btn-default">
                            Volume 100%
                        </button>
                    </div>

                </div>
            </div>

            <!-- ---------------- -->

            <script>
                if (isProduction()) { // TODO refactor this
                    document.write('<div class="fb-comments" data-href="' + window.location.href + '" data-numposts="5"></div>');
                }
            </script>

        </div>

        <footer>
            <div class="row">
                <div class="col col-xs-12">
                    <div class="copyright">Robert Rypuła 2015-2018</div>
                </div>
            </div>
        </footer>

    </div>

    <script src="square-wave-phase.js"></script>

    <script>
        if (isProduction()) { // TODO refactor this
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-76662342-1', 'auto');
            ga('send', 'pageview');
        }
    </script>

</body>
</html>
